<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>云中仙蕊</title>
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/all.css" />
    <link rel="stylesheet" href="./css/home.css" />
    <style>
      .card-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 60px 20px;
      }
      .card {
        width: calc(33.33% - 20px);
        margin-bottom: 20px;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
      @media (max-width: 768px) {
        .card {
          width: calc(50% - 15px);
        }
      }
      @media (max-width: 480px) {
        .card {
          width: 100%;
        }
      }
      .card-img {
        width: 100%;
        height: auto;
      }
      .card-text {
        padding: 10px;
        text-align: center;
        font-size: 14px;
        color: #333;
      }
      .navItem {
        width: 120px;
        color: #fff;
        cursor: pointer;
        text-align: center;
        font-size: 16px;
        padding: 10px;
      }
      .navItem.active {
        background-image: url("../images/navBor.png");
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
      }
      @media (max-width: 1000px) {
        .navItem {
          padding: 0;
          margin: 0;
          display: flex;
          justify-content: space-between;
        }
        .navItem::after {
          content: ">";
          display: flex;
          align-items: center;
        }
      }
    </style>
  </head>
  <body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
      <div class="container-fluid" id="nav-container"></div>
    </nav>
    <!-- 首页主体 -->

    <div style="padding-top: 80px; background-color: #fefefe; display: flex">
      <div
        class=""
        style="background-color: #c12f2f; width: 60px; height: 60px"
      >
        <img
          src="./images/fangzi.png"
          alt="背景图"
          class="img"
          style="width: 60px"
        />
      </div>
      <div
        id="2"
        class="navItem dropdown"
        style="background-color: #fefefe; color: #000; width: 120px"
      >
        <div
          style="
            font-size: 20px;
            display: flex;
            align-items: center;
            padding: 0 10px;
          "
        >
          产品系列
        </div>
        <ul class="dropdown-menu">
          <li class="goods-sort" data-value="1" id="2">产品1</li>
          <li class="goods-sort" data-value="2" id="2">产品2</li>
          <li class="goods-sort" data-value="3" id="2">产品3</li>
        </ul>
      </div>
    </div>
    <!-- 商品 -->
    <div class="hero d-flex align-items-center justify-content-center">
      <div class="card-container" id="cardContainer"></div>
    </div>
    <!-- 底部 -->
    <footer>
      <div class="container footer-container">
        <div class="row">
          <div class="col-12 col-md-4 footer-left">
            <img src="./images//qrcode.png" alt="二维码" />
            <p class="mt-3">服务热线：<br />4008005881</p>
            <p>邮箱：yunzhongrui_tea@163.com</p>
            <p>地址：安徽省合肥市政务区蔚蓝商务港</p>
          </div>
          <div class="col-12 col-md-8">
            <div class="row">
              <div class="col-6 col-md-3">
                <ul class="footer-links">
                  <li><a href="#">关于我们</a></li>
                  <li><a href="#">公司概况</a></li>
                  <li><a href="#">联系我们</a></li>
                </ul>
              </div>
              <div class="col-6 col-md-3">
                <ul class="footer-links">
                  <li><a href="#">品牌资讯</a></li>
                  <li><a href="#">公司新闻</a></li>
                  <li><a href="#">媒体报道</a></li>
                </ul>
              </div>
              <div class="col-6 col-md-3">
                <ul class="footer-links">
                  <li><a href="#">茶饮系列</a></li>
                  <li><a href="#">小罐茶系列</a></li>
                  <li><a href="#">蜂蜜系列</a></li>
                  <li><a href="#">原料茶系列</a></li>
                </ul>
              </div>
              <div class="col-6 col-md-3">
                <ul class="footer-links">
                  <li><a href="#">茶饮系列</a></li>
                  <li><a href="#">小罐茶系列</a></li>
                  <li><a href="#">蜂蜜系列</a></li>
                  <li><a href="#">原料茶系列</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="copyright mt-4">
          Copyright 2001-2023 安徽云中蕊品牌有限公司版权所有
        </div>
      </div>
    </footer>
    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="./js/navData.js"></script>
    <script src="./js/navAllFunc.js"></script>
    <script>
      navAllfunc1(); //导航栏 事件
      let ca = localStorage.getItem("myCookie") || 3;
      // goodsFn([...itemList, ...itemList1]);
      setTimeout(() => {
        if (ca == 1) {
          goodsFn([...itemList, ...itemList1]);
        } else if (ca == 2) {
          goodsFn([...itemList]);
        } else if (ca == 3) {
          goodsFn([...itemList1]);
        }
      });
    </script>
  </body>
</html>
